<template>
	<el-dialog title="新增彩票" 
		:visible.sync="addCaipiaoView" 
		width="40%" 
		:before-close="handleClose">
		<el-form :model="game" :rules="rules" ref="game">
			<table>
				<tr>
					<td class="title">彩票英文名</td>
					<td >
						<el-form-item prop="cn">
							<el-input type="text" v-model="game.cn"/>
						</el-form-item>
					</td>
				</tr>
				<tr>
					<td class="title">彩票中文名</td>
					<td >
						<el-form-item prop="en">
							<el-input type="text" v-model="game.en" />
						</el-form-item>
					</td>
				</tr>
				<tr>
					<td class="title">icons</td>
					<el-form-item prop="sm">
					<td  class="content" style="border:none;display: flex;flex-direction:row;justify-content: space-around;">
						
							<input type="file" name="sm" id="sm"  @change="imgFile(40,40,$event)"/>
							<label for="sm" ref="sm">
								<i class="el-icon-plus" ></i>
							</label>
							<span style="150px;">请上传大小为40x40的图片</span>
					</td>
					</el-form-item>
				</tr>
				<tr>
					<td class="title">icons</td>
					<td style="display: flex;flex-direction:row;justify-content: space-around;">
						<el-form-item prop="big">
							<input type="file" name="big" id="big" @change="imgFile(90,90,$event)" />
							<label for="big" style="width: 90px;height: 90px;" ref="big">
							<i class="el-icon-plus" ></i>
							</label>
						</el-form-item>
						<span style="150px;">请上传大小为90x90的图片</span>
					</td>
				</tr>
			</table>
		</el-form>
		<span slot="footer" class="dialog-footer">
	    		<el-button @click="handleClose">取消</el-button>
	    		<el-button @click="addImg" type="primary">确定</el-button>
	    	</span>
	</el-dialog>
</template>
<script>
import axios from 'axios'
	export default {
		//子组件要拿到父组件的showAddNew,要用props属性传递
		props: ['addCaipiaoView'],
		data() {
			return {
				game:{sm:'',big:''},
				uploadFile:[],
				rules:{
					en:[
						{required:true,message:'请输入中文名称',trigger:'blur'},
						{min:2,message:'输入长度不能小于2',trigger:'blur'}
					],
					cn:[
						{required:true,message:'请输入英文名称',trigger:'blur'},
						{min:2,message:'输入长度不能小于2',trigger:'blur'}
					],
					icon:[
						{required:true,message:'请选择图片',trigger:'change'}
						
					],
					icon2:[
						{required:true,message:'请选择图片',trigger:'change'}
					]
				}
					
						
				
			}
		},
		methods:{
			handleClose(){
				this.$parent.addCaipiaoView=false;
				var sm=this.$refs.sm;
				var big=this.$refs.big;
				//制空
				sm.innerHTML='<i class="el-icon-plus" ></i>';
				big.innerHTML='<i class="el-icon-plus" ></i>';
				this.$refs['game'].resetFields();
				this.uploadFile=[];
			},
			addImg(){
				this.$refs['game'].validate((valid)=>{
	           			if(valid){
	           				//创建文档碎片
	           				var fd=new FormData();
	           				for(var i=0;i<this.uploadFile.length;i++){
	           					fd.append('file',this.uploadFile[i]);
	           				}
	           				fd.append('en',this.game.en);
	           				fd.append('cn',this.game.cn); 
	           				let config = {
				                    headers:{'Content-Type':'multipart/form-data'}  
				                };
	           				//提交
	           				axios.post(this.$apis.addNewGame,fd,config)
	           				.then((resp)=>{
	           					console.log(resp);
	           					this.$message({
	           						message:resp.data.message,
	           						type:resp.data.success?"success":"danger"
	           					})
	           					if(resp.data.success){
	           						this.$store.dispatch('loadAllGames')
	           					}
	           					this.handleClose();
	           				}).catch((error)=>{
	           					console.log(error);
	           				})
	           			}
	           			else{
	           				console.log('请正确输入内容');
	           				return false;
	           			}
	           		})
			},
			imgFile(width,height,event){
				//兼容
				var ev=event||window.event;
				var file=ev.target.files[0];
				//拿文件路径，方法
				var url=this.getObjectURL(file);
				var img=new Image();
				img.src=url;
				img.onload=()=>{
					if(img.width!=width||img.height!=height){
						alert(`请上传符合宽为${width},高为${height}的图片`);
					}
					else{
						if(width==40){
							//向上传的数组插入图片
							this.uploadFile.push(file);
							var sm=this.$refs.sm;
							//显示整个图片
							sm.innerHTML=img.outerHTML;
							this.game.sm=true;
						}
						if(width==90){
							this.uploadFile.push(file);
							var big=this.$refs.big;
							big.innerHTML=img.outerHTML;
							this.game.big=true;
						}
					}
				}
				console.log(file);
			},
			getObjectURL(file) {
				var url=null;
				if(window.createObjectURL!=undefined){
					url=window.createObjectURL(file);
				}
				else if(window.URL!=undefined){
					url=window.URL.createObjectURL(file);
				}
				else if(window.wekitURL!=undefined){
					url=window.webkitURL.createObjectURL(file);
				}
				return url;
			}
			
	} 
}
</script>
<style lang="scss" scoped>
	.title {
		width: 30%;
		text-align: center;
		line-height: 38px;
	}
	.content{
		width: 70%;
	}
	
	#big,#sm{
		display: none;
	}
	
	label{
		border: 1px dashed lightgray;
		padding: 0 5px;
	    font-size: 30px;
	    border-radius: 5px;
	    color: #333;
	    background-color: #fff;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	
</style>